<!DOCTYPE html>
<html>
  <head>
    <title>Touch test</title>
  </head>

  <body style="touch-action: none">
    <style>
      button {
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        width: 10px;
        height: 10px;
        padding: 0;
        margin: 0;
      }
    </style>
    <button>Click target</button>
    <script>
      var allEvents = [];
      for (const name of ["touchstart", "touchmove", "touchend"]) {
        globalThis.addEventListener(
          name,
          (event) => {
            allEvents.push({
              type: name,
              changedTouches: [...event.changedTouches].map((touch) => ({
                clientX: touch.clientX,
                clientY: touch.clientY,
                radiusX: touch.radiusX,
                radiusY: touch.radiusY,
                force: touch.force,
              })),
              activeTouches: [...event.touches].map((touch) => ({
                clientX: touch.clientX,
                clientY: touch.clientY,
                radiusX: touch.radiusX,
                radiusY: touch.radiusY,
                force: touch.force,
              })),
            });
          },
          true,
        );
      }
      for (const name of ['pointerdown', 'pointermove', 'pointerup', 'click']) {
        globalThis.addEventListener(
          name,
          (event) => {
            allEvents.push({
              type: name,
              x: event.x,
              y: event.y,
              width: event.width,
              height: event.height,
              altitudeAngle: event.altitudeAngle,
              azimuthAngle: event.azimuthAngle,
              pressure: event.pressure,
              pointerType: event.pointerType,
              twist: event.twist,
              tiltX: event.tiltX,
              tiltY: event.tiltY,
            });
          },
          true,
        );
      }
    </script>
  </body>
</html>
